<template>
  <div class="thinking-block mb-3">
    <!-- 思考区块容器 -->
    <div class="bg-gray-800/50 border border-gray-600/50 rounded-lg overflow-hidden">
      <!-- 标题栏 - 可点击折叠/展开 -->
      <div 
        class="flex items-center justify-between p-3 bg-gray-700/30 border-b border-gray-600/30 cursor-pointer hover:bg-gray-700/50 transition-colors"
        @click="toggleCollapsed"
      >
        <div class="flex items-center space-x-2">
          <!-- 思考图标 -->
          <div class="w-5 h-5 bg-purple-600 rounded-sm flex items-center justify-center">
            <font-awesome-icon 
              :icon="['fas', 'brain']" 
              class="text-white text-xs"
              :class="{ 'animate-pulse': isThinking }"
            />
          </div>
          
          <!-- 标题文字 -->
          <span class="text-sm font-medium text-purple-200">
            {{ isThinking ? '思考中...' : '思考完成' }}
          </span>
          
          <!-- 状态指示器 -->
          <div v-if="isThinking" class="flex space-x-1">
            <div class="w-1 h-1 bg-purple-400 rounded-full animate-bounce" style="animation-delay: 0ms"></div>
            <div class="w-1 h-1 bg-purple-400 rounded-full animate-bounce" style="animation-delay: 150ms"></div>
            <div class="w-1 h-1 bg-purple-400 rounded-full animate-bounce" style="animation-delay: 300ms"></div>
          </div>
        </div>
        
        <!-- 折叠/展开图标 -->
        <div class="flex items-center space-x-2">
          <span class="text-xs text-gray-400">
            {{ collapsed ? '展开' : '收起' }}
          </span>
          <font-awesome-icon 
            :icon="collapsed ? ['fas', 'chevron-down'] : ['fas', 'chevron-up']"
            class="text-gray-400 text-xs transition-transform duration-200"
          />
        </div>
      </div>
      
      <!-- 思考内容区域 -->
      <div
        v-show="!collapsed"
        class="thinking-content transition-all duration-300 ease-in-out"
        :class="{ 'max-h-0 overflow-hidden': collapsed }"
      >
        <div class="p-4 space-y-2">
          <!-- 思考步骤列表 -->
          <div v-if="thinkingSteps.length > 0" class="space-y-1">
            <div
              v-for="(step, index) in thinkingSteps"
              :key="index"
              class="text-xs text-gray-400 italic leading-relaxed"
              :class="{
                'text-purple-300': step.isActive,
                'text-gray-500': !step.isActive && step.isCompleted,
                'text-gray-600': !step.isActive && !step.isCompleted
              }"
            >
              <span class="inline-block w-4 text-center">
                {{ step.isCompleted ? '✓' : (step.isActive ? '●' : '○') }}
              </span>
              {{ step.content }}
            </div>
          </div>

          <!-- 详细思考内容 - 支持累积显示 -->
          <div v-if="allThinkingContent || detailedContent" class="mt-3 pt-3 border-t border-gray-600/30">
            <div class="text-xs text-gray-500 mb-2">详细思考过程：</div>

            <!-- 显示累积的所有思考内容 -->
            <div v-if="allThinkingContent" class="text-xs text-gray-400 italic leading-relaxed whitespace-pre-wrap font-mono">
              {{ allThinkingContent }}
            </div>

            <!-- 如果没有累积内容，显示当前思考内容 -->
            <div v-else-if="detailedContent" class="text-xs text-gray-400 italic leading-relaxed whitespace-pre-wrap font-mono">
              {{ detailedContent }}
            </div>
          </div>

          <!-- 空状态 -->
          <div v-if="thinkingSteps.length === 0 && !detailedContent" class="text-xs text-gray-500 italic text-center py-2">
            正在初始化思考过程...
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick } from 'vue'

// Props
const props = defineProps({
  thinkingSteps: {
    type: Array,
    default: () => []
  },
  detailedContent: {
    type: String,
    default: ''
  },
  allThinkingContent: {
    type: String,
    default: ''
  },
  thinkingIterations: {
    type: Array,
    default: () => []
  },
  isThinking: {
    type: Boolean,
    default: true
  },
  defaultCollapsed: {
    type: Boolean,
    default: false
  }
})

// 响应式数据
const collapsed = ref(props.defaultCollapsed)

// 方法
const toggleCollapsed = () => {
  collapsed.value = !collapsed.value
}

// 监听思考状态变化
watch(() => props.isThinking, (newValue) => {
  // 当开始思考时，自动展开
  if (newValue && collapsed.value) {
    collapsed.value = false
  }
})

// 监听思考步骤变化
watch(() => props.thinkingSteps, (newSteps) => {
  // 当有新的思考步骤时，确保展开状态
  if (newSteps.length > 0 && collapsed.value) {
    collapsed.value = false
  }
}, { deep: true })
</script>

<style scoped>
.thinking-block {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.thinking-content {
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.thinking-content.collapsed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}



/* 自定义动画 */
@keyframes thinking-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-thinking {
  animation: thinking-pulse 1.5s ease-in-out infinite;
}

/* 滚动条样式 */
.thinking-content::-webkit-scrollbar {
  width: 4px;
}

.thinking-content::-webkit-scrollbar-track {
  background: rgba(75, 85, 99, 0.3);
  border-radius: 2px;
}

.thinking-content::-webkit-scrollbar-thumb {
  background: rgba(147, 51, 234, 0.5);
  border-radius: 2px;
}

.thinking-content::-webkit-scrollbar-thumb:hover {
  background: rgba(147, 51, 234, 0.7);
}

/* 响应式设计 */
@media (max-width: 640px) {
  .thinking-block {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
  
  .thinking-content {
    font-size: 0.75rem;
  }
}
</style>
